<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="mb-3" style="text-align: right;">
              <b-dropdown dropup variant="secondary" class="butn">
                <template slot="button-content">
                  <i class="ri-add-line align-middle" style="font-size: 1rem;"></i>
                  <span style="margin:0 20px 0 6px;">用户管理</span>
                  <i class="mdi mdi-chevron-up"></i>
                </template>
                <b-dropdown-item-button @click="addUser">添加用户</b-dropdown-item-button>
                <b-dropdown-item-button @click="userCenter">用户中心</b-dropdown-item-button>
                <b-dropdown-item-button @click="roleManagement">角色管理</b-dropdown-item-button>
              </b-dropdown>
            </div>
            <div class="table-responsive">
              <b-table
                class="table-centered"
                :items="ordersData"
                :fields="fields"
                responsive="sm"
                :per-page="perPage"
                :current-page="1"
                thead-class="thead-light"
              >
                <template v-slot:cell(viewDetail)>
                  <div @click="toDetail" class="pointer" style="color: #5664d2;">查看</div>
                </template>
              </b-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
export default {
  components: {
    Layout,
    PageHeader,
  },
  data () {
    return {
      title: "用户管理",
      ordersData: [
        {
          serialNum: "1",
          userName: "user1@stonedt.com",
          name: "思通",
          role: "开发者1",
          createTime:"2021-10-13",
        }
      ],
      perPage: 10,
      fields: [
        { key: "serialNum", label: "序号" },
        { key: "userName",  label: "用户名" },
        { key: "name",  label: "姓名" },
        { key: "role", label: "角色" },
        { key: "createTime", label: "创建时间" },
        { key: "viewDetail",  label: "查看详情" },
      ],
    }
  },
  methods: {
    addUser(){
      this.$router.push("/user/addUser")
    },
    userCenter(){
      this.$router.push("/user/userCenter")
    },
    roleManagement(){
      this.$router.push("/user/roleManagement")
    },
    toDetail(){
      this.$router.push("/user/userDetail")
    },
  }
}
</script>
<style lang="scss" scoped>
.butn{
  ::v-deep .btn{
    background-color: #252b3b;
    border-color: #252b3b;
    border-radius: 30px;
    display: flex;
    align-items: center;
  }
  ::v-deep .btn-secondary.focus {
    box-shadow: 0 0 0 0.15rem rgb(37 40 58 / 50%);
  }
}
</style>
